﻿@{
    ViewBag.Title = "ReadArticle";
}
@using mscook.mvc;
@model mscook.mvc.Models.ReadArticleModel
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>览月齐鲁</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="@Url.Content("~/BootStrap/js/jquery-1.9.1.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/BootStrap/js/bootstrap.js")" type="text/javascript"></script>
    <!-- Le styles -->
    <link href="@Url.Content("~/BootStrap/css/bootstrap.css")" rel="stylesheet"/>
    <link href="@Url.Content("~/BootStrap/css/bootstrap-responsive.css")" rel="stylesheet"/>
    <link href="@Url.Content("~/Content/website/read.css")" rel="stylesheet" type="text/css" />
    <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy.js"></script>
    <script src="@Url.Content("~/apps/core.js")"></script>
    <!--<script src="@Url.Content("~/BootStrap/js/holder.js")" type="text/javascript"></script>-->
    <script type="text/javascript">

        $(function () {
            //document
            $(document).on("click", "a.needBonus", function () {
                $("#bonusModal").modal("show");
                $("#bonusModal p.message").html($(this).data("message"));
                $("#bonusModal p.bonus").html("需消耗" + $(this).data("bonus") + "积分")
                var resourceId = $(this).attr("data-resource");
                $("#makesureTobuy").attr("data-resource", resourceId);
                $("#makesureTobuy").attr("data-url", $(this).data("url"));

                return false;
            });//a click

            $("#makesureTobuy").click(function () {
                var $this = $(this);
                var resourceId = $this.attr("data-resource");
                var skipTo = $this.attr("data-url");
                var url = "@Url.Action("BuyResource", "Account")";
                $.ajax({
                    url: url,
                    data: { resourceId: resourceId },
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        if (data.isSucceed) {
                            self.location.href = skipTo;
                        }
                        else {
                            $("#bonusModal p.message").html(data.message);
                        }
                    }

                });
            });
        });
        $(function () {
            $("#MagazineLabel").click(function () {
                var url = "@Url.Action("SaveMagazineLabel")";
                var index = $(this).attr("data-index");
                var magazineId = $(this).attr("data-magazine");
                //$("#magazineLabelModel").modal("show");
                $.getJSON(url, { pageNumber: index, magazineId: magazineId }, function (data) {
                });
                alert("收藏成功，下次阅读自动跳转至本页");
            });

            $.getJSON("/Home/SelectImageSetting", function (config) {
                var folder;
                var $scr_wid = $(window).width();
                var banner_wid;
                var banner_hei;
                var screen_num;
                function hasFolder(set, folder) {
                    var image_setting = null;
                    $.each(set, function (i, elem) {
                        if (elem.folder == folder) {
                            image_setting = elem;
                            return false;
                        }
                    });
                    return image_setting;
                }
                $.each(config, function (i, item) {
                    //alert(config[i].name);
                    var images = config[i].ImageSettings;
                    //alert(images.folder);
                    //var img_fol = images.folder;
                    if (images != null && images.length != 0) {
                        var image_setting;
                        if ($scr_wid >= 1200 && (image_setting = hasFolder(images, "wide")) !== null) {
                            folder = "wide";
                            acc_min_width = "115px";
                            banner_wid = image_setting.width;
                            banner_hei = image_setting.height;
                            screen_num = 7;
                            //feature_width = 450;
                            //feature_height = 230;

                        } else if ($scr_wid >= 768 && $scr_wid <= 979 && (image_setting = hasFolder(images, "pad")) !== null) {
                            folder = "pad";
                            acc_min_width = "30px";
                            banner_wid = image_setting.width;
                            banner_hei = image_setting.height;
                            screen_num = 5;
                            //feature_width = 340;
                            //feature_height = 174;


                        } else if ($scr_wid < 768 && (image_setting = hasFolder(images, "mobile")) !== null) {
                            folder = "mobile";
                            acc_min_width = "20px";
                            banner_wid = image_setting.width;
                            banner_hei = image_setting.height;
                            screen_num = 7;


                        } else {
                            image_setting = hasFolder(images, "default");
                            folder = "default";
                            acc_min_width = "70px";
                            banner_wid = image_setting.width;
                            banner_hei = image_setting.height;
                            screen_num = 7;
                            //feature_width = 450;
                            //feature_height = 230;
                        }
                        $('div[data-image-setting=' + config[i].alias + '] img').each(function (i, img) {
                            var $img = $(img);

                            var $slide_li = $img.parent();
                            var source = $img.data("source");
                            if (source) {
                                var data = "Upload/" + folder + "/" + source;
                                if (data) {
                                    $img.attr("data-src", data);
                                    $slide_li.attr("data-bottom-thumb", data);
                                }
                            }


                        });




                    }

                })




            });
        });
    </script>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
<script src="//cdnjs.bootcss.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<![endif]-->
    <!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="BootStrap/css/bootstrap-ie6.css">
<![endif]-->
    <!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="BootStrap/css/ie.css">
<![endif]-->
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144"
        href="http://www.bootcss.com/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114"
        href="http://www.bootcss.com/assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72"
        href="http://www.bootcss.com/assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="http://www.bootcss.com/assets/ico/apple-touch-icon-57-precomposed.png">
    <style type="text/css" id="holderjs-style">
        .holderjs-fluid {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            font-family: sans-serif;
            margin: 0;
        }
    </style>
</head>

<body>
    @Html.Partial("_BonusModal")

    @Html.Partial("_LoginModal")

    <!-- container
================================================== -->
    <div class="container content-wrapper">
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner" style="position: relative">
                <div class="item" data-image-setting="Magazine">
                    <img src="~/Upload/@Model.Magazine.ImageName"/>
                </div>
                <div class="item" data-image-setting="Article">
                    <div class="content">
                        <div class="header">
                            <div class="title">
                                <p>目录</p>
                                <p>CONTENT</p>
                            </div>
                            <div class="logo">
                                <h1>美食之窗</h1>
                                <h4>A Window Of Taste</h4>
                            </div>
                        </div>
                        <div class="cont">
                            <div class="span6 bord_r pad_t">
                                <div class="row">
                                    @*<div class="span2 visible-desktop">
                                        <div style="width: 190px; height: 300px; background: url(Images/51d234c5172cc.jpg);"></div>
                                        <h4><a href="">曼谷酸甜虾</a></h4>
                                    </div>
                                    <div class="span4 visible-desktop">
                                        <div style="width: 300px; height: 300px; background: url(Images/51d678dbc73c1.jpg);"></div>
                                        <h4><a href="">果园一品葵</a></h4>
                                    </div>
                                    <hr class="featurette-divider" />*@
                                    <div class="span3">
                                        <ul>
                                            @*<li>
                                                <div class="til pull-left">
                                                    <a href="#" id="ind_02" num="2">02&nbsp&nbsp封面人物</a>
                                                    <p class="visible-phone">采访何源，是件很快乐的事情，因为何源总是面带着微笑，似乎在他那里，没有什么烦恼忧愁</p>
                                                </div>
                                                <div class="til_img_a pull-right visible-phone"></div>
                                                <div class="clearfix"></div>
                                            </li>
                                            <li class="visible-phone">
                                                <div class="til_a pull-right">
                                                    <div class="til_child">
                                                        <a href="#" id="A1" num="2">02&nbsp&nbsp封面人物(1)</a>
                                                    </div>
                                                    <div class="til_child">
                                                        <a href="#" id="A2" num="2">02&nbsp&nbsp封面人物(2)</a>
                                                    </div>
                                                    <div class="til_child">
                                                        <a href="#" id="A3" num="2">02&nbsp&nbsp封面人物(3)</a>
                                                    </div>

                                                </div>
                                                <div class="til_img_b pull-left visible-phone"></div>
                                                <div class="clearfix"></div>
                                            </li>
                                            <li><a href="#" id="ind_03" num="3">06&nbsp&nbsp顶级餐饮团队</a></li>
                                            <li><a href="#" id="ind_04" num="4">08&nbsp&nbsp餐饮经理人</a></li>
                                            <li><a href="#" id="ind_05" num="5">11&nbsp&nbsp凉菜SHOW</a></li>
                                            <li><a href="#">27&nbsp&nbsp百变海鲜</a></li>
                                            <li><a href="#">37&nbsp&nbsp川菜飘香</a></li>*@
                                            @for (int i = 0; i < Model.ArticlePublishDetails.Count(); i++)
                                            {
                                                var articlePublishDetail = Model.ArticlePublishDetails.ElementAt(i);

                                                <li><a href="#" class="contentGo" name="@Html.Encode(i + 2)">@(i+1)  @Html.Encode(articlePublishDetail.DataOfUnit.title)</a></li>
                                                 
                                            }
                                        </ul>
                                    </div>
                                    @*  <div class="span3">
                                        <ul>
                                            <li><a href="#">53&nbsp&nbsp家常菜</a></li>
                                            <li><a href="#">58&nbsp&nbsp会所揭秘</a></li>
                                            <li><a href="#">60&nbsp&nbsp搜店</a></li>
                                            <li><a href="#">62&nbsp&nbsp土食主义</a></li>
                                            <li><a href="#">69&nbsp&nbsp旺菜排行榜</a></li>
                                            <li><a href="#">75&nbsp&nbsp美食橱柜</a></li>
                                        </ul>
                                    </div>*@
                                    <hr class="featurette-divider" />
                                </div>

                            </div>
                            <div class="span4  pad_l pad_t">
                                <div class="">
                                    @*                                    <div class="cover visible-desktop">
                                    </div>*@
                                    <p class="space company">
                                        @*2013年08月刊<br />*@
                                        主管：衡水经济委员会<br />
                                        主办：济南若奇广告传媒有限公司<br />
                                        国际标准刊号：ISSN1004-0927<br />
                                        国内统一刊号：CN37-1019/C
                                    </p>

                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                    </div>

                </div>


                @* <div class="item" data-image-setting="Article">
                    <div class="content">
                        <div class="in_head">
                            <div class="ms_log"></div>
                            <p>封面人物</br>cover</p>
                        </div>
                        <div class="in_cont content-pad">
                            <div class="row">
                                <div class="span5">
                                    <div class="page_img"></div>
                                </div>
                                <div class="span5">
                                    <p class="page_font">
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“规范公务商务接待活动，公务接待用餐采用自助餐形式”、“着力解决创建达标活动过多过滥问题，实现创建达标活动大幅减少”……江苏省委常委会日前研究制定了作风建设即知即改十项制度规定，同时决定在全省开展“三项清理”工作。在教育实践活动中，江苏省委常委会共梳理出基层干部和群众意见建议1106条。“项目审批环节再少一些、速度再快一点”、“更多地深入基层企业调查研究”、“淘汰落后产能要研究退出机制”……针对反映强烈的突出问题，省委常委落实制度建设，同时通过媒体解读十项制度规定和“三项清理”内容，接受社会各界监督。
                                    </p>
                                    <p class="page_font">
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“规范公务商务接待活动，公务接待用餐采用自助餐形式”、“着力解决创建达标活动过多过滥问题，实现创建达标活动大幅减少”……江苏省委常委会日前研究制定了作风建设即知即改十项制度规定，同时决定在全省开展“三项清理”工作。在教育实践活动中，江苏省委常委会共梳理出基层干部和群众意见建议1106条。“项目审批环节再少一些、速度再快一点”、“更多地深入基层企业调查研究”、“淘汰落后产能要研究退出机制”……针对反映强烈的突出问题，省委常委落实制度建设，同时通过媒体解读十项制度规定和“三项清理”内容，接受社会各界监督。
                                    </p>
                                    <p class="page_font">
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“规范公务商务接待活动，公务接待用餐采用自助餐形式”、“着力解决创建达标活动过多过滥问题，实现创建达标活动大幅减少”……江苏省委常委会日前研究制定了作风建设即知即改十项制度规定，同时决定在全省开展“三项清理”工作。在教育实践活动中，江苏省委常委会共梳理出基层干部和群众意见建议1106条。“项目审批环节再少一些、速度再快一点”、“更多地深入基层企业调查研究”、“淘汰落后产能要研究退出机制”……针对反映强烈的突出问题，省委常委落实制度建设，同时通过媒体解读十项制度规定和“三项清理”内容，接受社会各界监督。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>*@
                @foreach (var articlePublishDetail in Model.ArticlePublishDetails)
                {
                    var relativeLink = Model.RelativeLinks.Where(o => o.ResourceId.Equals(articlePublishDetail.ArticleKey.Id())).SingleOrDefault();
                    <div class="item" data-image-setting="Article">
                        <textarea class="data-lazyload hide" >
                    @{
                    

                    if (relativeLink == null)
                    {
                        <div class="content">

                            @Html.Raw(articlePublishDetail.PublishedArticle)

                        </div>
                    }
                    else
                    {
                        var resourceBonusSetting = Model.ResourceBonusSettings.Where(o => o.ResourceID.Equals(relativeLink.LinkId)).SingleOrDefault();
                        if (resourceBonusSetting == null || resourceBonusSetting.Bonus == 0 || (Model.LoginUser != null && (Model.LoginUser.IsVip || Model.LoginUser.hasPurchased(resourceBonusSetting.ResourceID))))
                        { <a href="@Url.Action("Read" + relativeLink.LinkType, relativeLink.LinkType, new { id = relativeLink.LinkId })" class=""> 
                           <div class="content">
                                        
                            @Html.Raw(articlePublishDetail.PublishedArticle)

                        </div></a>
                        
                        }
                        else
                        {
                            if (Model.LoginUser == null)
                            {
                               <a href="#dialog-form-login" data-toggle="modal" class=" "><div class="content">

                            @Html.Raw(articlePublishDetail.PublishedArticle)

                        </div></a>
                            }
                            else
                            {
                               <a href="#" data-url="@Url.Action("Read" + relativeLink.LinkType, relativeLink.LinkType, new { id = relativeLink.LinkId })" data-bonus="@Math.Abs(resourceBonusSetting.Bonus)" data-message="@Html.Encode("您确定要购买吗")" data-resource="@resourceBonusSetting.ResourceID" class="needBonus "><div class="content">

                            @Html.Raw(articlePublishDetail.PublishedArticle)

                        </div></a>
                            }
                        }
                    }
                    }
                    

                        </textarea>
                    </div>
                }


            </div>
            <!--  <a id="J_pre" class="left carousel-control" href="#myCarousel" style="height:100px;display:block;font-family:'宋体';"
           data-slide="prev">‹</a>
        <a id="J_next" class="right carousel-control" href="#myCarousel" data-slide="next">›</a>-->
        </div>
        <div id="pin_view_arrows">
            <a id="J_pre" href="javascript:void(0);" class="prev visible-desktop"></a>
            <a id="J_next" href="javascript:void(0);" class="next visible-desktop"></a>
        </div>
    </div>

    <!--bottom navbar
================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="navbar-inner">
            <div class="container">
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="">
                            <a href="@Url.Action("index", "magazine")">
                                <img src="/Images/back.png" /></a>
                        </li>
                        <li class="">
                            <a href="javascript:void(0);" id="content">
                                <img src="/Images/cont.png" /></a>
                        </li>
                        @if (Model.LoginUser != null)
                        {
                            <li class="">
                                <a href="javascript:void(0);" data-index="0" data-magazine="@Model.Magazine.Id" id="MagazineLabel">
                                    <img src="/Images/add.png" /></a>
                            </li>
                        }
                        else
                        {
                            <li class="hide"><a href="javascript:void(0);" data-index="0" data-magazine="@Model.Magazine.Id" id="MagazineLabel"></a></li>
                        }
                        <li class="">

                            <a href="javascript:void(0);">
                                <img src="/Images/nav-prev.png" id="pre" /></a>
                        </li>
                        <li class="">
                            <a href="javascript:void(0);" class="J_next">
                                <img src="/Images/nav-next.png" /></a>
                        </li>



                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Le javascript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->


    <!--<script>
    !function ($) {
        $(function () {
            // carousel demo
            $('#myCarousel').carousel()
        })
    } (window.jQuery)
</script>
<script>
    KISSY.use('cook/filter', function (kissy, filter) {
        filter.init();
    })
    KISSY.use('cook/slide2/slide2', function (kissy, slide) {
        new slide();

    })
</script> -->
    <script>
        //    KISSY.use('cook/slide2/slide2', function (kissy, slide) {
        //        new slide();

        //    })



        KISSY.use('gallery/slide/1.1/base', function (_kissy, Slide) {
            var _slide = new Slide('myCarousel', {
                //autoSlide: true,
                effect: 'hSlide',
                //timeout: 3000,
                //speed: 700,
                contentClass: "carousel-inner",
                pannelClass: "item",
                eventType: 'click',
                triggerDelay: 400,
                selectedClass: 'active',
                adaptive_fixed_width: true,
                //adaptive_fixed_height:true,
                //carousel:true,
                touchmove: true

            });

            var label = parseInt("@Model.PageNumber");

            _slide.go(label, false);

            _slide.resetSlideSize();
            //        _kissy.one('.J_pre').on('click', function (e) {
            //            e.halt();
            //            _slide.previous();


            //        });

            KISSY.Event.on('a.contentGo', 'click', function (e) {
                e.halt();
                var index = parseInt(this.name);
                _slide.go(index, false);
                
            });

            _slide.on("afterSwitch", function (e) {
                e.halt();
                //2013-12-17 basilwang 解决了延迟加载后，文章高度不能自适应的bug
                _slide.resetSlideSize();
                //_kissy.DOM.height('.content-wrapper', '400px');
                _kissy.one('#MagazineLabel').attr("data-index", _slide.currentTab)

            });


            _kissy.one('#J_next').on('click', function (e) {
                e.halt();
                _slide.next();
            });
            _kissy.one('#J_pre').on('click', function (e) {
                e.halt();
                _slide.previous();
            });
            _kissy.one('#pre').on('click', function (e) {
                e.halt();
                _slide.previous();
            });

            _kissy.one('.J_next').on('click', function (e) {
                e.halt();
                _slide.next();
            });
            _kissy.one('#content').on('click', function (e) {
                _slide.go(1, false);
                _slide.resetSlideSize();
            });


        });
    </script>
    <!--<script src="BootStrap/js/holder.js" type="text/javascript"></script>-->
    <!--[if lte IE 6]>
<script type="text/javascript" src="js/bootstrap-ie.js"></script>
<![endif]-->
</body>
</html>
